<template>
  <div class="container" :style="{left: pointData.width + '%',top: pointData.height + '%'}">
    <div class="dot"></div>
    <div class="pulse"></div>
    <div class="pulse1" @click.stop="showExpentLabel()"></div>
    <div class="point_name">{{pointData.stationName}}</div>
  </div>
</template>

<script>
  export default {
    name: 'circleIcon',
    props: {
      pointData: {},
      params: {}
    },
    data () {
      return {}
    },
    methods: {
      showExpentLabel () {
        this.$emit('showComponent', this.pointData)
      }
    },
    mounted () {
    }
  }
</script>

<style scoped>
  .container {
    position: absolute;
    width: 200px;
    height: 44px;
  }

  .pulse1:hover {
    cursor: pointer;
  }

  .dot {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 14px;
    top: 14px;
    border: 1px solid #509dff;
    border-radius: 50%;
    background-color: #509dff;
  }

  .pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid #509dff;
    left: 7px;
    top: 7px;
    border-radius: 50%;
  }

  .pulse1 {
    position: absolute;
    width: 38px;
    height: 38px;
    left: 0;
    top: 0;
    border: 2px solid #509dff;
    border-radius: 50%;
    opacity: 0.5;
  }

  .point_name {
    position: absolute;
    left: 38px;
    top: 7px;
    color: #eeeeee;
    font-size: 16px;
  }
</style>
